Design System · v0.3 · Last updated April 2026

Lumen system.

A cinematic film editor's UI feels like a darkroom — quiet light, generous shadows, ink-on-paper type. The system codifies that mood as tokens, components, and rules.

3 typefaces 14 color tokens 22 components 1 brand · Lumen Studio
01

Principles

The four ideas that govern everything below. Reach for them when a decision is hard.

P1 · Filmic, not flashy

Use light like a cinematographer.

Shadows are deeper than gray. Highlights are warm, never neon. Avoid pure white on pure black — it photographs cheaply. The whole interface should feel like 35mm at golden hour.

P2 · Earned ornament

Italic serif marks the soul.

Italic serif is reserved for the moment a feature wants to feel like a craft choice — never decorative. Mono for measurements, sans for everything else.

P3 · Generative is the verb

AI is a co-editor, not a wizard.

Show the seed. Show the pass. Show the credits. The user should feel they're directing a precise apprentice — never that the machine made decisions in the dark.

P4 · Density is intimacy

Editors live in their tools.

A 12-hour edit needs information density. Don't blow up controls for the casual user — give them a Compact mode toggle and treat the timeline like a cockpit.

02

Color

Two themes, one accent family. Dark is canonical — every screen is designed there first; light is a daytime alternate.

Dark · canonical
#0A0A0C
bg
--bg · canvas
#111114
bg-1
--bg-1 · panels
#16161A
bg-2
--bg-2 · cards
#1D1D22
bg-3
--bg-3 · hover
#F4F1EA
text
--text · ink
72% / 45%
text-2/3
opacity scale
Accent · warm filmic gold
#E6C79C
accent
primary
#C8956A
accent-2
gradient pair
14% α
accent-soft
selection bg
#8AD3A7
good
success / done
#FF6A4D
danger
error / record
Accent variants · user can choose
#E6C79C
Sodium
default · cinematic
#FF6A4D
Sunset
action · ad
#8AD3A7
Bottle
doc · journalism
#9C7CFF
Dusk
music · social
#F0C860
Brass
trailer · spec
03

Typography

Three families. Each one has a job — never use one in another's role.

Instrument Serifdisplay · 28–96px · weight 400italic for emphasis
Make films at the speed of thought.
Instrument Serif Italicquotes · captions22px
"It was the kind of light that made you remember things."
Geist · 600UI · 13–14pxbuttons, labels
Generate four · Send to timeline · Apply edit
Geist · 400body · 12.5–13pxline 1.5
Lumen is a desktop editor where AI generation, color, and sound live in one timeline. Tell it what you see in your head — it shoots the shot, cuts the take, scores the scene.
Geist · 600 · uppercasesection headers · 10.5–11px0.06em tracking
Recent projects · Generated · Effects · Color wheels
Geist Mono · 500numbers · timecode · seeds10–12px
01:42:08:14 · 24fps · seed 0x9F2A · ~ 14.2 GB · −12 LUFS
04

Space & surface

4-px grid. Radii grow with surface size. Shadows are warm and rare — only floating things cast.

Spacing scale · 4px base
4--s-1
8--s-2
12--s-3
16--s-4
24--s-6
32--s-8
48--s-12
64--s-16
Radii
3
6
10
14
Shadows · used sparingly
sm
md
lg · floating
05

Components

Atomic UI. Buttons, chips, sliders, cards — what every screen is built from.

Buttons
With AI prefix glyph
Pills & chips
Rec.709 04:18:12 ⌘K EN · 98%
Selectable chips
2.39:1 6 s 24 fps Kodachrome ×4 variations
Sliders & inputs
Saturation56
Contrast72
Status dots
done generating queued error
Avatars
SK
MR
LJ
SK
MR
LJ
Card · clip thumbnail
#NARRATIVE 04:18
Atlas — Ep.03
Editing· 2h ago
Empty-state art
Conjure your first shot.
Pair an SVG mark with a serif headline. Always supportive copy — never prescriptive.
06

Iconography

1.5px stroke, line-only, rounded ends. Glyphs (✦ ↻ ↧ ⌘) are reserved for AI affordances.

play
add
ai · ✦
cut
layers
voice
focus
list
color
audio
schedule
generate
07

Motion

Cinematic = slow in, slow out. Nothing snaps. The cursor glides; modals breathe.

swift120 ms · cubic-bezier(.2,.7,.3,1)
standard220 ms · cubic-bezier(.32,.72,.24,1)
cinematic420 ms · cubic-bezier(.6,.05,.2,1)
generate · pulse1500 ms · ease-in-out · accent ring
scene transition600 ms · crossfade · letterbox if 2.39
08

Voice & tone

Lumen speaks like a quiet, well-read editor. Confident. Not chatty. Never breathless about AI.

Do · headlines
"Conjure your first shot."
Active verb, single noun, italic for the noun that matters. Feels like a director's note, not a notification.
Don't
"Welcome to your AI-powered video creation experience! 🎉"
Marketing voice, exclamation, emoji. Reads like a SaaS dashboard.
Do · empty states
"A blank frame."
Two words. The metaphor lands by itself. Body copy explains; the headline doesn't have to.
Don't
"You don't have any media yet. Drag and drop files to get started!"
Stating the absence is hostile to a first-time user. Frame it as opportunity.
Do · AI explanation
"Generated · seed 0x9F2A · 6.00s · 24 credits"
Receipt-style. Editors trust precise data. Show the seed; treat AI like a clip with provenance.
Don't
"Lumen made this for you with AI magic ✨"
"Magic" is condescending in a craft tool. Filmmakers reject black boxes.
Do · errors
"Couldn't reach the engine. Trying again in 4s."
State what happened, what's next, in that order. Quiet about blame.
Don't
"Oops! Something went wrong 😬 Please try again later."
"Oops" is for consumer apps. No emoji. No vague "later."
09

Layout

The studio shell is a fixed three-column grid. Side · stage · right. Timeline always at the bottom; no exceptions.

topbar · 56px · brand · breadcrumbs · ⌘K · avatar
sidebar · navigation · density-aware
stage · the work · #000 if media
right · inspector · AI / clip / color
timeline · 140–320px · tracks & transport